<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media"
          v-for="(item, index) in newslist"
          :key="index">
        <router-link :to="'/home/newsinfo/'+item.id">
          <img class="mui-media-object mui-pull-left"
               :src="item.img_url">
          <div class="mui-media-body">
            <h2>{{item.title}}</h2>
            <p class="mui-ellipsis">
              <span>发表时间：{{item.add_time | dateFormat}}</span>
              <span>点击：{{item.click}}</span>
            </p>
          </div>
        </router-link>
      </li>

    </ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
  data() {
    return {
      newslist: []
    }
  },
  created() {
    this.getnewslist();
  },
  methods: {
    getnewslist() {
      this.axios.get('/getnewslist').then(res => {
        if (res.status == 200) {
          this.newslist = res.data;
        } else {
          Toast('新闻获取失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mui-table-view {
  h2 {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mui-ellipsis {
    display: flex;
    font-size: 12px;
    color: #226aff;
    justify-content: space-between;
  }
}
</style>